<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-button style="float: right; padding: 3px 0" type="text"
      @click="() => this.$router.push('/book')">新增</el-button
      >
    </div>
    <el-table :data="list" border fit highlight-current-row :row-class-name="className">>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="书籍信息" width="200" align="center">
        <template slot-scope="scope">
          <div class="info">
            <div class="pic">
              <img :src="scope.row.photo[0].url" alt="scope.row.title" width="150px" />
            </div>
            <div class="title">
              <a href="">{{ scope.row.name }}</a>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="作者" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.author }}
        </template>
      </el-table-column>

      <el-table-column label="出版地" width="300" align="center">
        <template slot-scope="scope">
          {{ province.find(item => item.province === scope.row.place.province).name }}
          {{ city.find(item => item.province === scope.row.place.province && item.city === scope.row.place.city).name }}
          {{ county.find(item => item.province === scope.row.place.province && item.city === scope.row.place.city && item.county === scope.row.place.county).name }}
        </template>
      </el-table-column>

      <el-table-column label="出版时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.date.substr(0, 10) }}
        </template>
      </el-table-column>
      
      <el-table-column label="价格" width="100" align="center">
        <template slot-scope="scope">
          {{
            Number(scope.row.price) === 0
              ? "免费"
              : "¥" + scope.row.price
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="press"
        label="出版社"
        width="300"
        align="center"
      >
        <template slot-scope="scope"> {{ scope.row.press }} </template>
      </el-table-column>

      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <router-link :to="'/book/' + scope.row.id">
            <el-button type="text" size="mini" icon="el-icon-edit"
              >详细信息</el-button
            >
          </router-link>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="removeById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getPageList"
    />
  </el-card>
</template>

  <script>
export default {
  mounted(){
    let books = window.sessionStorage.getItem('books');
    if(books){
      books = JSON.parse(books);
      this.total = books.length;
      this.books = books;
      console.log(books)
      this.getPageList(1);
      let cities = JSON.parse(window.sessionStorage.getItem('cities'));
      this.province = cities.province;
      this.city = cities.city;
      this.county = cities.county;
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      page: 1,
      limit: 10,
      books: [],
      province: [],
      city: [],
      county: []
    };
  },
  methods: {
    className({rowIndex}){
      let length = window.sessionStorage.getItem('length');

      if(length){
        length = parseInt(length);
        if(length !== this.total && this.total < this.limit){
          if(rowIndex === this.list.length - 1){
            window.sessionStorage.setItem('length', this.total.toString());
            return 'animated fadeInLeft'
          }
        }
      }

      return '';
      
    },
    getPageList(page = 1){
      this.page = page;
      let limit = this.limit;
      this.list = this.books.slice((page - 1) * limit, page * limit);
    },
    removeById(id){
      this.$confirm('此操作将删除该书籍', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
          this.isDelete = true;
          let books = JSON.parse(window.sessionStorage.getItem('books'));
          books.splice(books.findIndex(item => item.id === id), 1);
          window.sessionStorage.setItem('books', JSON.stringify(books));
          this.books = books;
          this.getPageList(1);
      }).catch((response) => {
          if (response === 'cancel') {
              this.$message({
                  type: 'info',
                  message: '已取消删除'
              })
          } else{
              this.$message({
                  type: 'error',
                  message: '删除失败!'
              })
          }
      })
      
    }
  }
};
</script>

<style scoped>
  a{
    text-decoration: none;
    color: #333;
  }
</style>